<template>
  <div id="temporaryPlan">
    <temporaryPlanTable
      v-if="key == 1"
      class="temporaryPlanTable"
      :getKey="getKey"
    ></temporaryPlanTable>

    <temporaryPlanFrom
      class="temporaryPlanFrom"
      v-if="key == 2"
      :getKey="getKey"
      style="margin: 0 auto; width: 95%"
    ></temporaryPlanFrom>
    <temporaryPlanDetails
      v-if="key == 3"
      :temporaryId="temporaryId"
      :getKey="getKey"
      style="margin: 0 auto; width: 95%"
    ></temporaryPlanDetails>
  </div>
</template>

<script>
import temporaryPlanFrom from './temporaryPlanFrom.vue'
import temporaryPlanTable from './temporaryPlanTable.vue'
import temporaryPlanDetails from './temporaryPlanDetails.vue'

export default {
  data() {
    return {
      key: 1,
      temporaryId: '',
    }
  },
  components: {
    temporaryPlanFrom,
    temporaryPlanTable,
    temporaryPlanDetails,
  },
  created() {},
  methods: {
    getKey(key, id) {
      this.key = key
      this.temporaryId = id
    },
  },
}
</script>

<style lang="less" scoped>
#temporaryPlan {
  height: 100%;
  width: 100%;
  display: flex;
  .temporaryPlanTable {
    width: 100%;
  }
  .temporaryPlanFrom {
    width: 100%;
  }
}
.el-menu-vertical-temporaryPlan {
  width: 18rem;
  height: 61rem;
}
.constructionPlanContent {
  width: 100%;
  position: relative;
}
</style>
<style lang="less"></style>
